<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>admin detail</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/admin/adminDetail.js"></script>
	
<style type="text/css">
a:HOVER {
	/* color: #d43f3a; */
	/* color: #55B055; */
	color: #47A447;
	font-weight: bold;
	text-decoration: none;
}
img {
	cursor: pointer;
}

.hd1 {
	position: fixed;
	z-index: 5;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #E4E3E5;
	background-color: #F3F3F3;
	font-size: 16px;
	font-weight: bold;
}
.hd1 .back {
	margin-left: 20px;
	font-size: 16px;
	font-weight: bold;
}
.hd1_temp {
	width: 100%;
	height: 50px;
}

/****** bookdetail ******/
#detail {
	/* height: 300px; */
	margin: 5px 10px 5px 10px;
	border: 2px solid #E4E3E5;
}
#detail .book_pic {
	/* border-right: 1px dashed #E4E3E5; */
	width:20%;
	float: left;
}
#detail .book_pic .pic img{
	width:120px;
	height:150px;
	margin: 10px 0;
}
#detail .book_pic .opt {
	width:120px;
	margin: 30px 0;
}
#detail .book_info {
	border: 0px solid #E4E3E5;
	width:80%;
	float: left;
	padding: 10px 20px;
}
#detail .book_info dt, dd {
	height: 40px;
	font-size: 18px;
}
.hang .c {
	float: left;
	margin-right: 20px;
	
}
.hang .describe {
	width: 70%;
}
.hang .describe .text {
	font-size: 14px;
	color: gray;
}

/****** catalog list ******/
#catalog {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin: 5px 10px 5px 10px;
	/* width: 90%; */
	border: 1px solid #E4E3E5;
}
#catalog .pd {
	margin-bottom: 0px;
}
.ts {
	font-size: 18px;
	font-weight: bold;
}
.catalogList li {
	list-style: none;
	float: left;
	padding: 3px;
	margin: 10px 50px 0 0;
}
.catalogList li .book {
	display: block;
}
.catalogList li .book img {
	width: 120px;
	height: 150px;
	display: block;
	padding: 2px;
	border: 1px solid #d3d3d3;
}
.catalogList li .book p {
	margin: 10px 0px 0 0;
	display: block;
	border: 0px solid gray;
}
.clear {
	clear: both;
}
/****** bottom ******/
#bottom {
	height: 20px;
}

.left {
	padding-right: 0px;
	border: 0px solid gray;
	font-size: 16px;
	font-weight: bold;
}

.shadeBack {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	z-index: 15;
	background-color: gray;
	opacity: 0.5;
	display: none;
}
.modifyPassword {
	display: none;
	position: absolute;
	z-index: 20;
	left: 25%;
	top: 25%;
	border: 1px solid gray;
	padding: 30px 15px;
	background-color: #DFDFDF;
	-webkit-border-radius: 10px;
}
.modifyPassword .c1 {
	width: 100px;
	display: inline-block;
	margin-right: 5px;
}
.modifyPassword .c2 {
	width: 250px;
	display: inline-block;
	margin-right: 5px;
}
.modifyPassword .c3 {
	width: 150px;
	display: inline-block;
	margin-right: 5px;
}
</style>
  </head>
  
<body>
  <div id="main" class="">
  	<div class="hd1" align="center">
  		<!-- <button type="button" class="pull-left btn btn-link back">back</button> -->
  		<a class="pull-left back" href="javascript:window.history.back();">back</a>
  		<span class="text-success">ADMINDETAIL</span>
  		<!-- <div class="text">heading</div> -->
  	</div>
  	<div class="hd1_temp"></div>
  	<div class="content">
  		<div id="detail">
  			<div class="book_pic" align="center">
  				<!-- <div class="pic">
  					<img alt="图片" src="images/author/author1.jpg">
  				</div> -->
  				<div class="opt">
					<button id="modifyPasswordBtn" type="button" class="btn btn-warning btn-block">
						<span class="glyphicon glyphicon-cog"></span> MODIFYPASS
					</button>
					<!-- 
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> OPTION
					</button>
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> OPTION
					</button>
					<button type="button" class="btn btn-info btn-block">
						<span class="glyphicon glyphicon-star"></span> OPTION
					</button> -->
  				</div>
  			</div>
  			<div class="book_info">
  				<dl>
  					<!-- <dt><span class="glyphicon glyphicon-user"></span> USERNAME</dt> -->
  					<!-- <dd class="hang">
						<div class="c"><span class="glyphicon glyphicon-user"></span> gender：<a href="javascript:;">man</a></div>
						<div class="c"><span class="glyphicon glyphicon-tasks"></span> add：<a href="javascript:;">tName</a></div>
						<div class="c"><span class="glyphicon glyphicon-flag"></span> number：aNumb</div>
  					</dd> -->
  					<dd class="hang">
  						<div class="c">
  							<span class="glyphicon glyphicon-star"></span>
  							USERNAME: AMDIN
  						</div>
  					</dd>
  					<dd class="hang">
  						<div class="c">
  							<span class="glyphicon glyphicon-user"></span>
  							ROLE: ROOT
  						</div>
  					</dd>
  					<dd class="hang">
  						<div class="c"><span class="glyphicon glyphicon-envelope"></span> EMAIL：bc41@gmail.com</div>
  					</dd>
  					<dd class="hang">
  						<div class="c"><span class="glyphicon glyphicon-time"></span> ADDTIME：2013-11-12 1:45:08</div>
  					</dd>
  					<!-- <dd class="hang">
  						<div class="c describe">
  							<span class="glyphicon glyphicon-asterisk"></span> describe：
  							<span class="text">他是雇佣兵世界的王者，他是令各国元首头疼的兵王！为朋友，他甘愿两肋插刀；为亲人，不惜血溅五步！是龙，终要翱翔于九天之上，携风云之势，一路高歌猛进，混的风生水起。各种美女也都纷纷而至，护士、警花、御姐等等一段段迤逦的邂逅！</span>
  						</div>
  					</dd> -->
  					<!-- <dd class="hang">
  						<div class="c">
  							<button class="btn btn-primary">MODIFYPASS</button>
  						</div>
  					</dd> -->
  				</dl>
  			  	<div></div>
  			</div>
  			<div style="clear: both;"></div>
  		</div>
  		
  		<div class="shadeBack"></div>
  		<div class="modifyPassword">
  		<form class="form-horizontal" method="post" role="form">
  			<div class="form-group">
  				<div class="c1 control-label left">旧密码:</div>
  				<div class="c2">
  					<input id="oldPassword" type="password" class="form-control">
  				</div>
  				<div class="c3 left text-danger">* not null</div>
  			</div>
  			<div class="form-group">
  				<div class="c1 control-label left">新密码:</div>
  				<div class="c2">
  					<input id="newPassword" type="password" class="form-control">
  				</div>
  				<div class="c3 left text-danger">* not null</div>
  			</div>
  			<div class="form-group">
  				<div class="c1 control-label left">确认密码:</div>
  				<div class="c2">
  					<input id="repeatPassword" type="password" class="form-control">
  				</div>
  				<div class="c3 left text-danger">* not null</div>
  			</div>
  			<div class="form-group">
  				<div class="c1 control-label left"></div>
  				<div class="c2">
  					<!-- <input id="repeatPassword" type="password" class="form-control"> -->
  					<button type="button" class="btn btn-warning modifyBtn">MODIFY</button>&nbsp;&nbsp;&nbsp;&nbsp;
  					<button type="button" class="btn btn-warning cancelBtn">CANCEL</button>
  				</div>
  			</div>
  		</div>
  		</form>
  	</div>
  	
  </div>
</body>
</html>
